<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo02</title>
    <style type="text/css">
    .grey{ width: 100px; height: 100px; border: 1px solid #DDD; }
    </style>
</head>
<body>
    <div class="grey grey1">11</div>
    <div class="grey grey2">22</div>
    <div class="grey grey3">33</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script type="text/javascript">
var tl = gsap.timeline({defaults: {duration: 1}});
//no more repitition of duration: 1!
tl.to(".grey1", {x: 200})
  .to(".grey2", {duration: 3, x: 200, scale: 0.2})
  .addLabel('label') // 增加位置标记
  .to(".grey3", {x: 200, scale: 2, y: 20});

</script>
</html>
